<script setup lang="ts">
import {reactive, provide} from 'vue'
import {useRouter} from 'vue-router';
import TaskList from '@/components/list/TaskList.vue'
import FooterTabbar from '@/components/FooterTabbar.vue'
import Banner from './components/Banner.vue'
import CitySwitch from './components/CitySwitch.vue'
import PositionType from './components/PositionType.vue'
import {taskStore} from '@/store/task'
import {Toast} from 'vant';
import {nmzpJobList} from "@/api/job"

const router = useRouter()
const store = taskStore()

const state = reactive({
  citySwitchBool: false,
  positionTypeBool: false,
  screenBool: false,
  positionValue: '',
  serviceMode: '',
  taskCycle: '',
  pageNum: 0,
  pageSize: 10,
  finished: false,
  loading: false,
  taskList: []
})

//查询参数
const queryData = reactive({
  jobName: "",
  address: "",
  jobType: ""
})
//获取工作列表
const getTaskAllList = async () => {
  state.loading = true
  if (state.pageNum == 1) state.taskList = []
  nmzpJobList(queryData).then(res => {
    if (res.code == 200) {
      state.taskList = state.taskList.concat(res.data)
      state.loading = false
      state.finished = true
    }
  })
}
const gotoSearch = () => {
  router.push('/task/search')
}
const onLoad = () => {
  state.pageNum = state.pageNum + 1
  getTaskAllList()
}
const onRefresh = () => {
  state.pageNum = 1
  getTaskAllList()
}
const closeCitySwitch = (item: any) => {
  if (item) {
    store.setCityValue(item.label)
    queryData.address = item.value
    onRefresh()
  }
  state.citySwitchBool = false
}
const closePositionType = (res: any) => {
  if (res) {
    state.positionValue = res
    queryData.jobType = res.id
    onRefresh()
  }
  state.positionTypeBool = false
}
const closeScreen = (obj: any) => {
  if (obj) {
    state.serviceMode = obj.mode
    state.taskCycle = obj.cycle
    onRefresh()
  }
  state.screenBool = false
}
provide('popup', {
  closeCitySwitch,
  closePositionType,
  closeScreen
})
</script>
<template>
  <div class="task-page">
    <div class="task-top">
      <div class="task-top-city" @click="state.citySwitchBool = true">
        <i></i>
        <strong>{{ store.cityValue }}</strong>
        <span></span>
      </div>
      <input type="text" @click="gotoSearch" readonly placeholder="请输入想要搜素的内容"/>
      <router-link to="/message/systemList" class="task-icon-message"></router-link>
    </div>
    <Banner></Banner>
    <div class="task-title">
      <h3>职位列表</h3>
      <div class="task-positon-pop" @click="state.positionTypeBool = true">
        {{ state.positionValue.value || '职位类型' }}<span></span></div>
    </div>
    <van-pull-refresh v-model="state.loading" @refresh="onRefresh">
      <van-list
          v-model:loading="state.loading"
          :finished="state.finished"
          finished-text=""
          @load="onLoad"
      >
        <TaskList :taskList="state.taskList"></TaskList>
        <div class="wy-no-data" v-if="!state.loading && state.taskList.length==0">暂无数据</div>
      </van-list>
    </van-pull-refresh>
    <!--切换城市弹窗-->
    <van-popup v-model:show="state.citySwitchBool" position="top" duration="0"
               :style="{ width: '100%',height: '100%' }">
      <CitySwitch></CitySwitch>
    </van-popup>
    <!--职位类型弹窗-->
    <van-popup v-model:show="state.positionTypeBool" position="top" duration="0"
               :style="{ width: '100%',height: '100%' }">
      <PositionType></PositionType>
    </van-popup>
  </div>
  <FooterTabbar></FooterTabbar>
</template>
<style scoped>
.task-page {
  background: #f9f9f9;
  padding: 0 0.59rem 3rem;
  min-height: calc(100vh - 3rem);
}

.task-top {
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.91rem;
}

.task-top-city {
  display: flex;
  align-items: center;
}

.task-top-city i {
  width: 1.04rem;
  height: 1.01rem;
  background: url('@/assets/img/icon/icon-place.png') no-repeat;
  background-size: 100%;
}

.task-top-city strong {
  font-size: 0.8rem;
  font-weight: 500;
  color: #333333;
  margin-left: 0.1rem;
}

.task-top-city span {
  margin: 0 0.6rem 0 0.2rem;
  display: inline-block;
  border-left: 0.18rem solid transparent;
  border-right: 0.18rem solid transparent;
  border-top: 0.36rem solid #333333;
}

.task-top input {
  flex: 1;
  height: 1.71rem;
  background: #ffffff url('@/assets/img/icon/icon-search.png') 0.35rem 0.3rem no-repeat;
  background-size: 9%;
  border: 0.03px solid #EDEDED;
  border-radius: 0.85rem;
  font-size: 0.69rem;
  font-weight: 300;
  color: #999999;
  padding-left: 1.7rem;
}

.task-icon-message {
  width: 1.31rem;
  height: 1.28rem;
  background: url('@/assets/img/icon/icon-remind.png') no-repeat;
  background-size: 100%;
  margin-left: 0.27rem;
}

.task-title {
  display: flex;
  align-items: center;
  margin-bottom: 0.67rem;
  margin-top: 1.44rem;
}

.task-title h3 {
  flex: 1;
  font-size: 0.96rem;
  line-height: 0.96rem;
  font-weight: bold;
  color: #333333;
}

.task-positon-pop, .task-screen-pop {
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: 300;
  color: #666666;
  margin-left: 0.56rem;
}

.task-positon-pop span, .task-screen-pop span {
  display: inline-block;
  border-left: 0.18rem solid transparent;
  border-right: 0.18rem solid transparent;
  border-top: 0.36rem solid #333333;
  margin-left: 0.25rem;
}
</style>